<template>
  <div class="box">

    <!-- 吸顶 -->
    <van-sticky :offset-top="0">
      <!-- 头部 -->
      <van-nav-bar title="首页"/>
    </van-sticky>

    <!-- 搜索框 -->
    <van-search shape="round" placeholder="搜科室、医生" />

    <!-- 轮播图 -->
    <HomeSwipe></HomeSwipe>

    <!-- 简介导航 -->
     <HomeNav></HomeNav>

    <h6>热门科室</h6>
    <!-- 热门科室组件 -->
    <HomeDepartment></HomeDepartment>

    <div class="doctor">
      <h6>名医专家</h6>
      <p>更多 ▷ </p>
    </div>
    <!-- 名医组件 -->
    <HomeFamousDoctor></HomeFamousDoctor>
  </div>
  <router-view />
</template>


<script setup lang="ts">
import { onMounted, ref } from 'vue';
import HomeDoctor  from "../components/MyDoctor/HomeDoctor.vue";
import HomeSwipe from "../components/MyDoctor/HomeSwipe.vue";
import HomeFamousDoctor from "../components/MyDoctor/HomeFamousDoctor.vue";
import HomeNav from "../components/MyDoctor/HomeNav.vue";
import HomeDepartment from "../components/MyDoctor/HomeDepartment.vue";

//标签切换 
const active = ref(0);

</script>

<style lang="scss" scoped>
.box {
  padding-bottom: 100px;
}

// 头部样式
// .van-nav-bar {
//   --van-nav-bar-height: 100px;
//   --van-nav-bar-background-color: #1486fa;
//   --van-nav-bar-title-text-color: #fff;
//   --van-nav-bar-icon-color: #fff
// }

h6 {
  margin: 15px;
  font-weight: normal
}

.doctor {
  overflow: auto; //清除浮动

  h6 {
    // 左浮动
    float: left;
  }

  p {
    // 右浮动
    float: right;
    margin: 15px;
    font-size: 32px;
    line-height: 47px;
    color: rgb(116, 109, 109);
  }
}
</style>
